<template>
  <div class="member-order-list">

    <!-- header -->
    <!-- 标签页 -->
    <van-tabs v-model="stateType"
              :class="['tab-nav',{'hideHead':!showHead}]"
              @change="setOrderNavActive">
      <van-tab v-for="item in orderNav"
               :key="'tab_'+item.id"
               :title="item.name"
               :name="item.id"></van-tab>
    </van-tabs>

    <van-list v-model="loading"
              :finished="!isMore"
              @load="getOrderList">

      <template v-if="order_group_list && order_group_list.length">

        <div class="order-body"
             v-for="(order_group, index) in order_group_list"
             v-bind:key="index">
          <div class="list"
               v-for="item in order_group.order_list"
               :key="item.order_id">
            <div class=""
                 @click="openLink('OrderDetail',{order_id:item.order_id})">
              <div class="flex justify-between align-center order-info solid-bottom">
                <span class="order_sn"> 订单编号: {{ item.order_sn }} </span>
                <span class="order_state">{{ item.state_desc }}</span>
              </div>

              <!-- 商品信息 -->
              <goods-module module-name="goods1n"
                            goodsImg="goods_image_url"
                            goodsName="goods_name"
                            goodsPrice="goods_price"
                            goodsId="goods_id"
                            goodsUrl="goods_url"
                            goodsNum="goods_num"
                            :list="item.extend_order_goods">
              </goods-module>
            </div>
            <!-- 锁定-->
            <div class="flex justify-end align-center btn-list">
              <van-button round
                          size="small"
                          disabled
                          v-if="false">退款中</van-button>
              <van-button size="small"
                          round
                          v-if="item.if_lock"></van-button>
              <!-- 取消订单 -->
              <van-button size="small"
                          round
                          v-if="item.if_cancel"
                          v-on:click="cancel(item)">取消订单</van-button>
              <!-- 退款取消订单 -->
              <!-- <van-button size="small"
                          round
                          v-if="item.if_refund_cancel"
                          v-on:click="openLink('RefundForm',{ order_id: item.order_id })">退款</van-button> -->
              <!-- 物流跟踪 -->
              <!-- <van-button size="small"
                          round
                          v-if="item.if_deliver"
                          v-on:click="openLink('OrderDeliver',{ order_id: item.order_id })">物流跟踪</van-button> -->
              <!-- 收货 -->
              <van-button size="small"
                          round
                          v-if="item.if_receive"
                          v-on:click="receive(item.order_id)">确认收货</van-button>
              <!-- 评价 -->
              <!-- <van-button size="small"
                          round
                          v-if="item.if_evaluation"
                          v-on:click="openLink(OrderEvaluate,{ order_id: item.order_id })">评价</van-button> -->
              <!-- 付款 -->
              <van-button size="small"
                          round
                          class="pay-btn"
                          v-if="order_group.pay_amount && order_group.pay_amount>0"
                          @click='pay(order_group.pay_sn)'>付款</van-button>
            </div>
          </div>
          <!-- 付款 -->
          <!-- <mt-van-button type="primary"
                     class="ds-van-button-large mt-5 mb-5">付款</mt-van-button> -->
        </div>
        <page-bottom v-show="!isMore && order_group_list.length > 0"
                     :loading="loading"
                     :more="isMore"></page-bottom>
      </template>
      <empty-data class="empty-data"
                  v-else-if="order_group_list && !order_group_list.length"></empty-data>
    </van-list>
  </div>
</template>

<script>
import { getOrderList, cancelOrder, receiveOrder } from '@/api/memberOrder'
import { mapState } from 'vuex'
import EmptyData from '@/components/EmptyData'
import PageBottom from '@/components/PageBottom'
import GoodsModule from '@/components/GoodsModule'
import { getOrderpayInfo } from '@/api/makeOrder'
import { Dialog, Toast } from 'vant'
export default {
  components: {
    EmptyData,
    PageBottom,
    GoodsModule
  },
  name: 'OrderList',
  data() {
    return {
      order_id: 0,
      orderNav: Object.freeze([
        {
          name: '全部',
          id: ''
        },
        {
          name: '待付款',
          id: 'state_new'
        },
        {
          name: '待发货',
          id: 'state_pay'
        },
        {
          name: '待收货',
          id: 'state_send'
        },
        {
          name: '已完成',
          id: 'state_noeval'
        }
      ]),
      stateType: this.$route.query.state ? this.$route.query.state : '',
      orderDetailVisible: false,
      wrapperHeight: 0,
      params: { page: 0, per_page: 10 },
      loading: false, // 是否加载更多
      isMore: true, // 是否有更多
      order_group_list: false
    }
  },

  props: {
    showHead: {
      type: Boolean,
      default: true
    }
  },

  mounted() {
    this.wrapperHeight = document.documentElement.clientHeight - 140
  },
  computed: {
    ...mapState({
      user: state => state.member.info
    })
  },
  created: function() {
    // this.getOrderList(true)
  },

  methods: {
    /**
     * 切换tab
     */
    setOrderNavActive(index) {
      this.stateType = index
      this.getOrderList(true)
    },

    /**
     * 取消订单
     */
    cancel(orderInfo) {
      Dialog.confirm({
        title: '提示',
        message: '确定要取消该订单吗？'
      }).then(() => {
        cancelOrder(orderInfo.order_id)
          .then(res => {
            this.getOrderList(true)
          })
          .catch(error => {
            this.$toast({
              type: 'fail',
              message: error.message
            })
          })
      })
    },

    /**
     * 确认收货
     */
    receive(orderId) {
      Dialog.confirm({
        title: '提示',
        message: '确定该订单已收货吗？'
      }).then(() => {
        receiveOrder(orderId)
          .then(res => {
            this.getOrderList(true)
          })
          .catch(error => {
            this.$toast({
              type: 'fail',
              message: error.message
            })
          })
      })
    },

    /**
     * 打开链接
     * @param {String} name 要打开的页面名称
     * @param {String} query 要传递的参数值
     */
    openLink(name, query) {
      if (!name) return false
      this.$router.push({ name, query })
    },

    /**
     * 支付订单
     */
    pay(paySn) {
      getOrderpayInfo(paySn)
        .then(res => {
          this.$router.push({
            name: 'PayPage',
            query: { pay_sn: paySn, pay_type: 'pay_new' }
          })
          // if (res.result.go_url) {
          //   // TODO 改回原生支付
          //   // this.$router.push()
          //   // window.location.href = res.result.go_url
          // }
        })
        .catch(error => {
          if (error.code === 12001) {
            // 订单已经支付
            this.$toast({
              type: 'fail',
              message: '该订单已支付'
            })
            this.$router.go(0)
          } else {
            this.$toast({
              type: 'fail',
              message: error.message
            })
            if (error.message === '请完成微信授权') {
              this.$router.push('/member/setting')
            }
          }
        })
    },

    /**
     * 获取订单列表
     */
    getOrderList(ifReplace) {
      Toast.loading('加载中')
      if (ifReplace) {
        this.loading = false
        this.params.page = 1
        this.isMore = true
      }

      getOrderList(this.params, this.stateType, '')
        .then(res => {
          Toast.clear()
          this.isMore = res.result.hasmore
          let tOrderGroup = res.result.order_group_list
          this.params.page = ++this.params.page
          this.loading = false
          if (tOrderGroup) {
            if (ifReplace || !this.order_group_list) {
              this.order_group_list = tOrderGroup
            } else {
              this.order_group_list = this.order_group_list.concat(tOrderGroup)
            }
          }
        })
        .catch(error => {
          Toast.clear()
          this.$toast({
            type: 'fail',
            message: error.message
          })
        })
    }
  }
}
</script>
<style  lang="scss">
.member-order-list {
  // 标签
  .tab-nav {
    border-bottom: 1px solid #f1f2f4;
    position: sticky;
    position: -webkit-sticky;
    top: 45px;
    left: 0;
    z-index: 200;
    background-color: #ffffff;
    &.hideHead {
      top: 0;
    }
    & /deep/ .van-tab--active {
      font-weight: bold;
      color: $mainColor;
      font-size: 14px;
    }
    & /deep/ .van-tabs__line {
      width: 25px !important;
      background-color: $mainColor;
    }
  }

  .order-body {
    font-size: 16px;
    margin-top: 10px;
    background-color: #ffffff;
    .order-info {
      height: 45px;
      line-height: 45px;
      padding: 0 15px;
      font-size: 14px;
      .order_sn {
        color: #666666;
      }
      .order_state {
        color: $mainColor;
      }
    }
  }

  .btn-list {
    .van-button {
      margin: 10px 10px 10px 0;
    }
  }

  .empty-data {
    height: 70vh;
  }
}
</style>
